<template>
  <div class="toolbar">
    <el-input
      v-model="search.receiverName"
      placeholder="请输入收货人姓名"
      clearable
      @change="onSearchChange"
    />
    <el-input
      v-model="search.receiverPhone"
      placeholder="请输入收货人电话号码"
      clearable
      @change="onSearchChange"
    />
    <el-input
      v-model="search.orderNumber"
      placeholder="请输入订单编号"
      clearable
      @change="onSearchChange"
    />
  </div>

  <div class="filter">
    <el-select
      v-model="filter.status"
      placeholder="请选择状态"
      clearable
      @change="onFilterChange"
    >
      <el-option
        v-for="item in filterOptions.status"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>

  <div class="btn-group">
    <el-button-group>
      <el-button type="danger" :icon="Delete" @click="deleteAll"
        >删除全部</el-button
      >
    </el-button-group>
  </div>

  <el-table
    ref="tableRef"
    @sort-change="sortChange"
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column
      sortable
      prop="orderNumber"
      label="订单编号"
      width="150px"
    />

    <el-table-column
      sortable
      fixed
      label="下单日期"
      width="150px"
      prop="orderTime"
    >
      <template #default="{ row }">
        {{ getFormatTime(row.orderTime, true) }}
      </template>
    </el-table-column>
    <el-table-column prop="title" label="商品名" width="150px" />
    <el-table-column sortable prop="totalSum" label="总金额" width="150px">
      <template #default="scope">
        <el-text class="mx-1" type="danger">{{ scope.row.totalSum }}</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="username" label="用户姓名" width="150px" />
    <el-table-column prop="receiverName" label="收货人" width="150px" />

    <el-table-column fixed prop="status" label="订单状态" width="150px">
      <template #default="scope">
        <el-tag
          :type="
            scope.row.status === '1'
              ? 'success'
              : scope.row.status === '2'
                ? 'warning'
                : scope.row.status === '3'
                  ? 'info'
                  : 'primary'
          "
          disable-transitions
        >
          {{
            scope.row.status == "1"
              ? "已支付"
              : scope.row.status == "2"
                ? "未支付"
                : scope.row.status == "3"
                  ? "已取消"
                  : "已退款"
          }}</el-tag
        >
      </template>
    </el-table-column>
    <el-table-column prop="receiverPhone" label="电话" width="150px" />

    <el-table-column prop="provinceName" label="省份" width="150px">
    </el-table-column>

    <el-table-column prop="receiverAddress" label="详细地址" width="150px" />

    <el-table-column fixed label="执行时间" width="150px">
      <template #default="scope">

        {{
          scope.row.status == "1"
            ? getFormatTime(scope.row.payTime, true)
            : scope.row.status == "2"
              ? getFormatTime(scope.row.orderTime, true)
              : scope.row.status == "3"
                ? getFormatTime(scope.row.cancelTime, true)
                : getFormatTime(scope.row.refundTime, true)
        }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button
          type="primary"
          size="small"
          :icon="Edit"
          circle
          @click="editRow(scope)"
        />
        <el-button
          type="danger"
          size="small"
          :icon="Delete"
          circle
          @click="deleteRow(scope)"
        />
      </template>
    </el-table-column>
  </el-table>

  <div class="pagination">
    <el-pagination
      :page-sizes="[2, 5, 20, 40, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      :default-page-size="pagination.size"
      @change="onPaginationChange"
    />
  </div>

  <el-dialog
    class="updateDialog"
    v-model="EditDialog.isVisible"
    :title="EditDialog.title"
    align-center
  >
    <el-form label-width="100px" label-position="left">
      <el-form-item label="用户名">
        <el-input disabled v-model="EditForm.username" />
      </el-form-item>
      <el-form-item label="收货人姓名">
        <el-input v-model="EditForm.receiverName" />
      </el-form-item>
      <el-form-item label="收货人电话">
        <el-input v-model="EditForm.receiverPhone" />
      </el-form-item>
      <el-form-item label="所在省份">
        <el-select
          v-model="optionValue"
          :placeholder="EditForm.provinceName"
          size="large"
          style="height: 30px"
        >
          <el-option
            v-for="item in provineOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="商品名">
        <el-input disabled v-model="EditForm.title" />
      </el-form-item>
      <el-form-item label="订单状态">
        <el-radio-group disabled v-model="EditForm.status">
          <el-radio value="1"> 已支付 </el-radio>
          <el-radio value="2"> 未支付 </el-radio>
          <el-radio value="3"> 已取消 </el-radio>
          <el-radio value="4"> 已退款 </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="EditForm.receiverAddress" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="save"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getFormatTime } from "@/apis/utility";
import {
  orderPage,
  orderDeleteByUserId,
  orderDeleteBatch,
  orderEdit,
} from "@/apis/admin/order";
import { reactive, onMounted, ref } from "vue";
import { Delete, Edit, Plus } from "@element-plus/icons-vue";

import { provincePage } from "@/apis/province";

// 存储订单数据
const tableData = ref([]);

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0,
});

// 搜索输入框搜索条件
const search = reactive({
  receiverAddress: "",
  receiverName: "",
  receiverPhone: "",
});

// 过滤对应的条件
const filter = reactive({
  status: null,
});

// 过滤对应的选项
const filterOptions = reactive({
  status: [
    {
      label: "已支付",
      value: "1",
    },
    {
      label: "未支付",
      value: "2",
    },
    {
      label: "已取消",
      value: "3",
    },
    {
      label: "已退款",
      value: "4",
    },
  ],
});

// 存储排序字段
const orders = reactive({
  column: "id",
  isAsc: true,
});

// 获取数据
const getPage = () => {
  orderPage(
    {
      filter: filter,
      search: search,
      orders: [orders],
    },
    pagination.page,
    pagination.size
  ).then((result) => {
    tableData.value = result.data.records;
    pagination.total = result.data.total;
  });
};

// 分页改变时触发
const onPaginationChange = (currentPage, pageSize) => {
  pagination.page = currentPage;
  pagination.size = pageSize;
  getPage();
};
// 页面加载时执行
onMounted(() => {
  getPage();
});
// 搜索输入框对应的触发事件
const onSearchChange = () => {
  getPage();
};
const onFilterChange = () => {
  getPage();
};

/**
 * 表格排序函数
 * @param {*} column 当前列对
 * @param {*} prop 当前字段
 * @param {*} order 当前排序方式
 */
const sortChange = ({ prop, order }) => {
  Object.assign(orders, {
    column: `CAST(${prop} AS UNSIGNED)`,
    isAsc: order === "ascending",
  });
  getPage();
};

const tableRef = ref();
/**
 * 删除全部选中行
 */
const deleteAll = async () => {
  const selectionRows = tableRef.value.getSelectionRows();
  const ids = selectionRows.map((row) => {
    return row.id;
  });
  // 删除请求函数
  await orderDeleteBatch(ids).then((result) => {
  });
  getPage();
};

 //删除一行
const deleteRow = (scope) => {
  orderDeleteByUserId(scope.row.id).then((result) => {
    getPage();
  });
};

/**
 * 修改表格数据
 */
const EditForm = ref({});

/**
 * 修改的对话框
 */
const EditDialog = reactive({
  isVisible: false,
  title: "",
});

 //修改当前行的数据
const editRow = (scope) => {
  EditDialog.isVisible = true;
  EditDialog.title = "修改";
  Object.assign(EditForm.value, scope.row);
  optionValue.value = "";
   //触发获取34个省份名字函数
  getProvincePage();
};

// 获取省份
const provincePagination = reactive({
  page: 1,
  size: 34,
});
 //触发获取34个省份名字函数
const getProvincePage = async () => {
  try {
    const result = await provincePage(
      {},
      provincePagination.page,
      provincePagination.size
    );
    provineOptions.value = result.data.records;
  } catch (error) {
    console.error(error);
  }
};

// 按下编辑保存按钮
const save = async () => {
  // 如果进行了省份修改
  if(optionValue.value)
  EditForm.value.provinceId = optionValue.value;
  //发送请求
  await orderEdit(EditForm.value).then((result) => {
      console.log(result);
    });
  EditDialog.isVisible = false;
  getPage();
};


// 多选框默认值
const optionValue = ref("");
// 多选框取值
const provineOptions = ref([]);





</script>
<style scoped lang="less">
.toolbar {
  padding-bottom: 10px;
  display: flex;
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.el-table {
  height: calc(100vh - 265px);
}

.filter {
  display: flex;
  margin-bottom: 10px;
}
.el-input,
.el-select {
  max-width: 250px;
}
.el-form {
  padding: 20px 40px;
}
</style>
